<template>
	<view class="outer-container">
		<uni-nav-bar statusBar="true"
			backgroundColor="#313131"
			color="#fff"
			left-icon="back"
			@clickLeft="backLastPage"
			title="我的会员">
		</uni-nav-bar>

		<ourLoading v-if="toPay"
			active
			text="支付宝支付中...">
			<image class="loading-img"
				src="../../static/img/my-vip/pay-pig-1.gif"
				mode="aspectFit" />
		</ourLoading>


		<view class="bg-container">
			<image class="bg-img"
				src="../../static/img/my-vip/ditu.png"
				mode=""></image>
			<view class="side-container">
				<view class="side-avatars">
					<image src="../../static/img/my-vip/yonghu1.png"
						mode=""></image>
					<image src="../../static/img/my-vip/yonghu2.png"
						mode=""></image>
					<image src="../../static/img/my-vip/yonghu3.png"
						mode=""></image>
					<image src="../../static/img/my-vip/yonghu4.png"
						mode=""></image>
					<image src="../../static/img/my-vip/yonghu5.png"
						mode=""></image>
					<image src="../../static/img/my-vip/yonghu6.png"
						mode=""></image>
				</view>
				<text>5593人已开通会员</text>
			</view>

			<text class="shopping-query">购买查询</text>

			<view class="vip-card-box">
				<image class="vip-card"
					src="../../static/img/my-vip/huiyuan108.png"
					mode=""></image>

				<view class="card-info">
					<template v-if="!userInfo">
						<image src="../../static/img/my-vip/touxiang495.png"
							mode=""
							class="avatar"></image>
						<view class="info-section">
							<view class="top-info">
								<text>立即登录</text>
								<text>会员</text>
							</view>
							<view class="bottom-info">
								<text>开通会员尊享VIP权益</text>
							</view>
						</view>
					</template>

					<template v-else>
						<image :src="userInfo.avatarUrl"
							mode=""
							class="avatar"></image>
						<view class="info-section">
							<view class="top-info">
								<text>{{userInfo.nickName}}</text>
								<text>会员</text>
							</view>
							<view class="bottom-info">
								<text>开通会员尊享VIP权益</text>
							</view>
						</view>
					</template>

				</view>

			</view>

		</view>

		<view class="vip-plans">
			<view class="plans-section">
				<view class="top">
					<view v-for="(item,index) in plans"
						:key="item.id"
						@tap="selectPlan"
						:class="['top-item', {active:item.id==selectPlanId}]"
						:id="item.id"
						:data-mouth="item.mouth"
						:data-amount="item.amount"
						>
						<view class="recommend"
							v-if="index==0">
							<image src="../../static/img/my-vip/tuijian.png"
								mode=""></image>
							<text>推荐</text>
						</view>
						<text class="duration">{{item.mouth}}个月</text>
						<text class="sale-price">￥{{item.salePrice}}</text>
						<text class="reg-price">￥{{item.regPrice}}</text>
					</view>

				</view>
				<view class="middle">
					<view class="congrats">
						<image src="../../static/img/my-vip/gongxi.png"
							mode=""></image>
						<text>恭喜</text>
					</view>
					<text>您获得2折开通会员特权</text>
				</view>
				<view class="bottom">
					<button type="default"
						@click="show = true">立即开通</button>
				</view>
			</view>


		</view>

		<view class="bottom-content-one">
			<heading title="VIP特权"></heading>

			<view class="privilege-content">
				<view class="privilege-row">
					<image src="../../static/img/my-vip/caipu.png"
						mode=""></image>
					<view class="privilege-info">
						<text class="info-one">1000+精品名厨菜谱</text>
						<text class="info-two">大咖教学, 轻松学会</text>
					</view>
				</view>

				<view class="privilege-row">
					<image src="../../static/img/my-vip/new.png"
						mode=""></image>
					<view class="privilege-info">
						<text class="info-one">每周上新</text>
						<text class="info-two">新菜持续更新中</text>
					</view>
				</view>

				<view class="privilege-row">
					<image src="../../static/img/my-vip/ad.png"
						mode=""></image>
					<view class="privilege-info">
						<text class="info-one">会员免广告打扰</text>
						<text class="info-two">体验更流畅</text>
					</view>
				</view>

				<view class="privilege-row">
					<image src="../../static/img/my-vip/biaoshi.png"
						mode=""></image>
					<view class="privilege-info">
						<text class="info-one">VIP身份尊贵标识</text>
						<text class="info-two">随时随地, 与众不同</text>
					</view>
				</view>



			</view>

		</view>

		<view class="bottom-content-two">
			<view class="details-title">
				会员使用说明
			</view>
			<view class="details-content">
				<view class="details-row">
					1. 会员服务一经开通, 不支持退款;
				</view>
				<view class="details-row">
					2. 如遇到手机支付问题, 建议参考Appstore支付流程;
				</view>
				<view class="details-row">
					3. 若会员开通异常, 请立即联系客服, 我们会在2个工作日内出处理结果。
				</view>
				<view class="details-row">
					4. 会员常见问题、会员服务协议、会员隐私协议
				</view>
			</view>











		</view>

		<u-popup :show="show"
			mode="bottom"
			:round="10"
			@close="close"
			@open="open">
			<view class="payment-popover">
				<view class="plans-section">

					<view class="payment-title">
						<uni-icons @tap="show = false"
							class="btn-close"
							type="closeempty"
							size="22"
							color="#a6a6a6"></uni-icons>
						开通VIP会员
					</view>
					<view class="top">
						<view v-for="(item,index) in plans"
							:key="item.id"
							@tap="selectPlan"
							:class="['top-item', {active:item.id==selectPlanId}]"
							:id="item.id"
							:data-mouth="item.mouth"
							:data-amount="item.amount"
							>
							<view class="recommend"
								v-if="index==0">
								<image src="../../static/img/my-vip/zhangjia.png"
									mode=""></image>
								<text>即将涨价</text>
							</view>
							<text class="duration">{{item.mouth}}个月</text>
							<text class="sale-price">￥{{item.salePrice}}</text>
							<text class="reg-price">￥{{item.regPrice}}</text>
						</view>


					</view>
					<view class="middle">
						<view class="congrats">
							<image src="../../static/img/my-vip/gongxi.png"
								mode=""></image>
							<text>恭喜</text>
						</view>
						<text class="congrats-tip">开通后立即全站去广告, 免费看10000+名厨视频</text>
					</view>
					<view class="bottom">
						<button type="default"
							@click="toPaymentSuccessful">立即购买</button>
					</view>
				</view>


			</view>
		</u-popup>
	</view>
</template>

<script>
	import backLastPage from '../../mixins/backLastPage.js'
	export default {
		data() {
			return {
				userInfo: null,
				show: false,
				plans: [{
						id: 0,
						mouth: 12,
						salePrice: 45,
						regPrice: 145
					},
					{
						id: 1,
						mouth: 3,
						salePrice: 18,
						regPrice: 28
					},
					{
						id: 2,
						mouth: 1,
						salePrice: 8,
						regPrice: 14
					}
				],
				selectPlanId: 0,
				mouth: 12,
				toPay: false,
				amount:45
			}
		},
		mixins: [backLastPage],
		onLoad() {
			this.userInfo = getApp().globalData.userInfo;
			this.getTopUpList();
		},
		methods: {
			selectPlan(e) {
				this.selectPlanId = e.currentTarget.id;
				this.mouth = e.currentTarget.dataset.mouth;
				this.amount = e.currentTarget.dataset.amount
			},
			async getTopUpList() {
				let { data: res } = await this.$api.myVip.getTopUpList();
				// console.log(res);
			},
			async toPaymentSuccessful() {
				// uni.showLoading({
				//     title: '支付宝支付中'
				// });
				this.show = false;
				this.toPay = true;
				let _id = getApp().globalData.userInfo._id;

				let res = await this.$api.myVip.openVip(_id, this.mouth);

				if (res.code) {
					getApp().globalData.userInfo.isVip = true;
					setTimeout(() => {
						// uni.hideLoading();
						this.toPay = false;
						uni.redirectTo({
							url: '/pages/payment-successful/payment-successful?amount=' + this.amount
						})
					}, 4000)
				}
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss"
	scoped>
	.outer-container {
		width: 100vw;
		height: 2330rpx;
		background-color: #f5f7fa;
		position: relative;

		.loading-img {
			max-width: 70vw;
			height: 500rpx;
		}

		uni-nav-bar ::v-deep {
			position: relative;
			z-index: -1;
		}

		.bg-container {
			position: absolute;
			top: 176rpx;
			left: 0;
			width: 100vw;
			z-index: 1000;

			.bg-img {
				width: 100%;
				height: 300rpx;
			}

			.side-container {
				display: flex;
				align-items: center;
				position: absolute;
				top: 20rpx;
				left: 0;
				z-index: 1100;
				width: 464rpx;
				height: 48rpx;
				background-color: #5c5c5c;
				border-radius: 0rpx 40rpx 40rpx 0rpx;

				.side-avatars {
					box-sizing: border-box;
					line-height: 48rpx;
					width: 185rpx;
					height: 100%;
					position: absolute;
					top: 5rpx;
					left: 24rpx;
					z-index: 1110;
					// border: 2rpx solid red;
					margin-right: 20rpx;

					image {
						position: absolute;
						width: 36rpx;
						height: 36rpx;

						&:nth-of-type(2) {
							left: 25rpx;
							z-index: 1111;
						}

						&:nth-of-type(3) {
							left: 55rpx;
							z-index: 1112;
						}

						&:nth-of-type(4) {
							left: 85rpx;
							z-index: 1113;
						}

						&:nth-of-type(5) {
							left: 115rpx;
							z-index: 1114;
						}

						&:last-of-type {
							left: 145rpx;
							z-index: 1115;
						}
					}
				}

				text {
					position: absolute;
					top: 5rpx;
					right: 28rpx;
					z-index: 1110;
					font-size: 26rpx;
					height: 48rpx;
					color: #fff;
				}
			}

			.shopping-query {
				position: absolute;
				right: 32rpx;
				top: 20rpx;
				color: #fff;
				font-size: 28rpx;
			}

			.vip-card-box {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 125rpx;
				left: 0;
				width: 750rpx;
				height: 302rpx;

				.vip-card {
					width: 750rpx;
					height: 300rpx;
					margin: 0 auto;
				}

				.card-info {
					display: flex;
					justify-content: space-around;
					align-items: center;
					position: absolute;
					top: 80rpx;
					bottom: 0;
					left: 128rpx;
					right: 0;
					width: 510rpx;
					height: 112rpx;

					.avatar {
						width: 108rpx;
						height: 108rpx;
						border-radius: $uni-border-radius-circle;
					}

					.info-section {
						display: flex;
						flex-direction: column;
						align-items: center;
						width: calc(510rpx - 108rpx - 20rpx);
						height: 112rpx;

						.top-info,
						.bottom-info {
							width: 100%;
							height: 50%;
						}

						.top-info {
							text {
								&:first-of-type {
									font-size: 40rpx;
									color: #7b5b21;
									margin-right: 20rpx;
								}

								&:last-of-type {
									width: 66rpx;
									height: 32rpx;
									background-color: #a5a5a5;
									border-radius: 16rpx;
									font-size: 28rpx;
									padding: 0 20rpx;
									color: #fff;
								}
							}
						}

						.bottom-info {
							font-size: 30rpx;
							color: #7f6026;
						}
					}
				}
			}

		}

		.vip-plans {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;
			box-sizing: border-box;
			padding: 0 30rpx;
			position: absolute;
			top: 390rpx;
			left: 0;
			width: 750rpx;
			height: 745rpx;
			background-color: #fff;

			.plans-section {
				width: 100%;
				height: 536rpx;
				// background-color: pink;
				box-sizing: border-box;
				padding: 24rpx 0 74rpx 0;



				.top {
					width: 100%;
					height: 254rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.top-item {
						position: relative;
						display: flex;
						flex-direction: column;
						align-items: center;
						width: 212rpx;
						height: 232rpx;
						background-color: #fbfcfe;
						border-radius: 16rpx;
						border: solid 2rpx #e0e0e0;

						.duration {
							margin-top: 36rpx;
							font-size: 36rpx;
							color: #464646;
						}

						.sale-price {
							margin-top: 24rpx;
							font-size: 40rpx;
							color: #deb264;
						}

						.reg-price {
							margin-top: 20rpx;
							font-size: 28rpx;
							font-weight: bold;
							color: #a49fa0;
							text-decoration: line-through;
						}

						.recommend {
							position: absolute;
							top: -25rpx;
							left: -10rpx;

							image {
								width: 98rpx;
								height: 48rpx;
							}

							text {
								position: absolute;
								top: 5rpx;
								left: 15rpx;
								font-size: 28rpx;
								color: #fff;
							}
						}


					}

					.active {
						background-color: #fbf7ef;
						border: solid 2rpx #dcb66a;
					}
				}

				.middle {

					display: flex;
					width: 100%;
					height: 70rpx;
					margin-top: 12rpx;

					text {
						color: #7b5b21;
						font-size: 30rpx;
					}

					.congrats {
						position: relative;
						top: 0rpx;
						left: 0rpx;



						image {
							width: 98rpx;
							height: 48rpx;
						}

						text {
							position: absolute;
							top: 5rpx;
							left: 15rpx;
							font-size: 28rpx;
							color: #fff;
						}
					}
				}

				.bottom {
					width: 100%;
					height: 86rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					button {
						width: 686rpx;
						height: 80rpx;
						line-height: 80rpx;
						font-size: 42rpx;
						color: #aa8e51;
						background-color: #fcf1d3;
						border-radius: 16rpx;
					}
				}
			}


		}

		.bottom-content-one {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 750rpx;
			height: fit-content;
			position: absolute;
			top: 1162rpx;
			left: 0;
			right: 0;
			bottom: 0;
			margin: 0 auto;
			background-color: #fff;
			margin-bottom: 24rpx;

			.privilege-content {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 750rpx;

				.privilege-row {
					display: flex;
					align-items: center;
					width: 100%;
					height: 100rpx;
					box-sizing: border-box;
					padding: 0 40rpx;
					margin-bottom: 50rpx;

					image {
						width: 90rpx;
						height: 90rpx;
						margin-right: 40rpx;
					}

					.privilege-info {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
						height: 100rpx;

						.info-one,
						.info-two {
							width: 100%;
							height: 48%;

						}

						.info-one {
							font-size: 32rpx;
							color: #484848;
						}

						.info-two {
							font-size: 26rpx;
							color: #afafaf;
						}

					}
				}

			}
		}


		.bottom-content-two {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 750rpx;
			height: 445rpx;
			position: absolute;
			left: 0;
			bottom: 0;
			background-color: #fff;
			box-sizing: border-box;
			padding: 30rpx;

			.details-title {
				width: 100%;
				text-align: left;
				font-size: 34rpx;
				color: #484848;
				margin-bottom: 22rpx;
			}

			.details-content {
				width: 100%;
				display: flex;
				flex-direction: column;

				.details-row {
					text-align: left;
					margin: 10rpx 0;
					font-size: 28rpx;
					color: #c3c3c3;
				}

			}
		}

		.payment-popover {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;
			box-sizing: border-box;
			padding: 0 30rpx;

			.plans-section {
				width: 100%;
				height: 600rpx;
				// background-color: pink;
				box-sizing: border-box;
				padding: 24rpx 0 20rpx 0;



				.payment-title {
					width: 100%;
					text-align: center;
					margin-bottom: 18rpx;
					font-size: 32rpx;
					color: #969696;

					.btn-close {
						position: absolute;
						top: 25rpx;
						left: 40rpx;

					}
				}

				.top {
					width: 100%;
					height: 300rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.top-item {
						position: relative;
						display: flex;
						flex-direction: column;
						align-items: center;
						width: 212rpx;
						height: 232rpx;
						background-color: #fbfcfe;
						border-radius: 16rpx;
						border: solid 2rpx #e0e0e0;

						.duration {
							margin-top: 36rpx;
							font-size: 36rpx;
							color: #464646;
						}

						.sale-price {
							margin-top: 24rpx;
							font-size: 40rpx;
							color: #deb264;
						}

						.reg-price {
							margin-top: 20rpx;
							font-size: 28rpx;
							font-weight: bold;
							color: #a49fa0;
							text-decoration: line-through;
						}

						.recommend {
							position: absolute;
							top: -25rpx;
							left: -10rpx;

							image {
								width: 158rpx;
								height: 56rpx;
							}

							text {
								position: absolute;
								top: 12rpx;
								left: 15rpx;
								font-size: 28rpx;
								color: #fff;
							}
						}


					}

					.active {
						background-color: #fbf7ef;
						border: solid 2rpx #dcb66a;
					}
				}

				.middle {

					display: flex;
					width: 100%;
					height: 70rpx;
					margin-top: 12rpx;

					.congrats-tip {
						color: #000;
						font-size: 26rpx;
						padding-top: 10rpx;
						box-sizing: border-box;
					}

					.congrats {
						position: relative;
						top: 0rpx;
						left: 0rpx;

						image {
							width: 98rpx;
							height: 48rpx;
						}

						text {
							position: absolute;
							top: 5rpx;
							left: 15rpx;
							font-size: 28rpx;
							color: #fff;
						}
					}
				}

				.bottom {
					width: 100%;
					height: 86rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					button {
						width: 686rpx;
						height: 80rpx;
						line-height: 80rpx;
						font-size: 42rpx;
						color: #aa8e51;
						background-color: #fcf1d3;
						border-radius: 16rpx;
					}
				}
			}


		}

	}
</style>
